<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创新季大赛 - 入围作品展示</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        // 配置Tailwind自定义颜色和字体
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#722ED1',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-dark">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="#" class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                    <i class="fa fa-lightbulb-o text-white text-xl"></i>
                </div>
                <span class="text-xl font-bold text-primary">创新季大赛</span>
            </a>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="#home" class="font-medium hover:text-primary transition-colors">首页</a>
                <a href="#works" class="font-medium hover:text-primary transition-colors">入围作品</a>
                <a href="#judges" class="font-medium hover:text-primary transition-colors">评委团队</a>
                <a href="#contact" class="font-medium hover:text-primary transition-colors">联系我们</a>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button id="menuBtn" class="md:hidden text-dark hover:text-primary transition-colors">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobileMenu" class="md:hidden hidden bg-white border-t">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
                <a href="#home" class="py-2 font-medium hover:text-primary transition-colors">首页</a>
                <a href="#works" class="py-2 font-medium hover:text-primary transition-colors">入围作品</a>
                <a href="#judges" class="py-2 font-medium hover:text-primary transition-colors">评委团队</a>
                <a href="#contact" class="py-2 font-medium hover:text-primary transition-colors">联系我们</a>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section id="home" class="bg-gradient-to-r from-primary to-accent text-white py-20 md:py-32">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow mb-6">
                    2023 创新季大赛
                </h1>
                <p class="text-[clamp(1rem,2vw,1.25rem)] mb-8 text-white/90">
                    探索前沿创新，见证未来力量。以下是本届大赛的入围优秀作品展示。
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="#works" class="bg-white text-primary hover:bg-gray-100 font-medium py-3 px-8 rounded-lg transition-all shadow-lg hover:shadow-xl">
                        查看入围作品
                    </a>
                    <a href="#contact" class="bg-transparent border-2 border-white hover:bg-white/10 font-medium py-3 px-8 rounded-lg transition-all">
                        联系我们
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 大赛简介 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">大赛简介</h2>
                <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
                <p class="text-gray-600 text-lg">
                    创新季大赛旨在发掘和推广具有前瞻性、实用性的创新作品，
                    鼓励跨界融合与技术创新，为优秀创意提供展示和发展的平台。
                    本届大赛共收到来自全国200余所高校和企业的1200余件作品，
                    经过初评和复评，最终评选出以下30件入围作品。
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
                <div class="bg-light rounded-xl p-6 text-center">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-trophy text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">权威评审</h3>
                    <p class="text-gray-600">
                        由行业专家、学术带头人组成的评审团，确保评选公平公正
                    </p>
                </div>
                
                <div class="bg-light rounded-xl p-6 text-center">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-users text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">广泛参与</h3>
                    <p class="text-gray-600">
                        吸引全国范围内的创新人才参与，汇集各领域创新成果
                    </p>
                </div>
                
                <div class="bg-light rounded-xl p-6 text-center">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-rocket text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">成果转化</h3>
                    <p class="text-gray-600">
                        优秀作品将有机会获得孵化支持，实现从创意到产品的跨越
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 作品展示区 -->
    <section id="works" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">入围作品展示</h2>
                <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
                <p class="text-gray-600 text-lg">
                    以下是本届创新季大赛的入围作品，点击作品卡片可查看详细信息
                </p>
            </div>
            
            <!-- 筛选区域 -->
            <div class="max-w-5xl mx-auto mb-10">
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                        <div class="flex flex-wrap gap-2">
                            <button class="filter-btn active px-4 py-2 rounded-full bg-primary text-white text-sm" data-category="all">
                                全部作品
                            </button>
                            <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 text-sm transition-colors" data-category="tech">
                                科技创新
                            </button>
                            <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 text-sm transition-colors" data-category="design">
                                设计创意
                            </button>
                            <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 text-sm transition-colors" data-category="social">
                                社会创新
                            </button>
                            <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 text-sm transition-colors" data-category="business">
                                商业计划
                            </button>
                        </div>
                        
                        <div class="w-full md:w-auto">
                            <div class="relative">
                                <input type="text" id="searchInput" placeholder="搜索作品名称或团队..." 
                                    class="w-full md:w-64 pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                                <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 作品列表 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
                <!-- 作品卡片1 -->
                <div class="work-card bg-white rounded-xl overflow-hidden shadow-md card-hover" data-category="tech">
                    <div class="relative">
                        <img src="https://picsum.photos/seed/tech1/600/400" alt="智能环境监测系统" class="w-full h-52 object-cover">
                        <div class="absolute top-3 left-3 bg-primary text-white text-xs font-medium px-3 py-1 rounded-full">
                            科技创新
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h3 class="text-xl font-bold">智能环境监测系统</h3>
                            <span class="text-sm text-gray-500">团队：绿境科技</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">
                            基于物联网技术的智能环境监测系统，可实时监测空气质量、温湿度、噪音等环境参数，通过AI算法进行数据分析和预警。
                        </p>
                        <button class="view-details w-full py-2 border border-primary text-primary hover:bg-primary hover:text-white rounded-lg transition-colors text-sm font-medium" 
                            data-id="1">
                            查看详情
                        </button>
                    </div>
                </div>
                
                <!-- 作品卡片2 -->
                <div class="work-card bg-white rounded-xl overflow-hidden shadow-md card-hover" data-category="design">
                    <div class="relative">
                        <img src="https://picsum.photos/seed/design1/600/400" alt="可折叠便携轮椅" class="w-full h-52 object-cover">
                        <div class="absolute top-3 left-3 bg-accent text-white text-xs font-medium px-3 py-1 rounded-full">
                            设计创意
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h3 class="text-xl font-bold">可折叠便携轮椅</h3>
                            <span class="text-sm text-gray-500">团队：无障碍设计工作室</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">
                            创新性的可折叠设计，重量仅3.5公斤，折叠后体积相当于一个背包大小，解决了传统轮椅携带不便的问题。
                        </p>
                        <button class="view-details w-full py-2 border border-primary text-primary hover:bg-primary hover:text-white rounded-lg transition-colors text-sm font-medium"
                            data-id="2">
                            查看详情
                        </button>
                    </div>
                </div>
                
                <!-- 作品卡片3 -->
                <div class="work-card bg-white rounded-xl overflow-hidden shadow-md card-hover" data-category="social">
                    <div class="relative">
                        <img src="https://picsum.photos/seed/social1/600/400" alt="乡村教育资源共享平台" class="w-full h-52 object-cover">
                        <div class="absolute top-3 left-3 bg-secondary text-white text-xs font-medium px-3 py-1 rounded-full">
                            社会创新
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h3 class="text-xl font-bold">乡村教育资源共享平台</h3>
                            <span class="text-sm text-gray-500">团队：乡知社</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">
                            连接城市优质教育资源与乡村学校的公益平台，通过在线课程、教师培训和资源共享，助力乡村教育发展。
                        </p>
                        <button class="view-details w-full py-2 border border-primary text-primary hover:bg-primary hover:text-white rounded-lg transition-colors text-sm font-medium"
                            data-id="3">
                            查看详情
                        </button>
                    </div>
                </div>
                
                <!-- 作品卡片4 -->
                <div class="work-card bg-white rounded-xl overflow-hidden shadow-md card-hover" data-category="business">
                    <div class="relative">
                        <img src="https://picsum.photos/seed/business1/600/400" alt="零浪费食品订阅服务" class="w-full h-52 object-cover">
                        <div class="absolute top-3 left-3 bg-dark text-white text-xs font-medium px-3 py-1 rounded-full">
                            商业计划
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h3 class="text-xl font-bold">零浪费食品订阅服务</h3>
                            <span class="text-sm text-gray-500">团队：绿食尚</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">
                            基于社区的食品订阅服务，通过精准计算需求减少食物浪费，同时支持本地农户，实现可持续的商业模式。
                        </p>
                        <button class="view-details w-full py-2 border border-primary text-primary hover:bg-primary hover:text-white rounded-lg transition-colors text-sm font-medium"
                            data-id="4">
                            查看详情
                        </button>
                    </div>
                </div>
                
                <!-- 作品卡片5 -->
                <div class="work-card bg-white rounded-xl overflow-hidden shadow-md card-hover" data-category="tech">
                    <div class="relative">
                        <img src="https://picsum.photos/seed/tech2/600/400" alt="基于区块链的知识产权保护系统" class="w-full h-52 object-cover">
                        <div class="absolute top-3 left-3 bg-primary text-white text-xs font-medium px-3 py-1 rounded-full">
                            科技创新
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h3 class="text-xl font-bold">区块链知识产权保护系统</h3>
                            <span class="text-sm text-gray-500">团队：链知盾</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">
                            利用区块链技术为原创作品提供时间戳证明和版权保护，简化版权登记流程，降低维权成本。
                        </p>
                        <button class="view-details w-full py-2 border border-primary text-primary hover:bg-primary hover:text-white rounded-lg transition-colors text-sm font-medium"
                            data-id="5">
                            查看详情
                        </button>
                    </div>
                </div>
                
                <!-- 作品卡片6 -->
                <div class="work-card bg-white rounded-xl overflow-hidden shadow-md card-hover" data-category="design">
                    <div class="relative">
                        <img src="https://picsum.photos/seed/design2/600/400" alt="模块化家具系统" class="w-full h-52 object-cover">
                        <div class="absolute top-3 left-3 bg-accent text-white text-xs font-medium px-3 py-1 rounded-full">
                            设计创意
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h3 class="text-xl font-bold">模块化家具系统</h3>
                            <span class="text-sm text-gray-500">团队：空间魔方</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">
                            可自由组合变换的模块化家具系统，适应不同空间需求和生活场景，延长产品生命周期，减少资源浪费。
                        </p>
                        <button class="view-details w-full py-2 border border-primary text-primary hover:bg-primary hover:text-white rounded-lg transition-colors text-sm font-medium"
                            data-id="6">
                            查看详情
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 加载更多按钮 -->
            <div class="text-center mt-12">
                <button id="loadMore" class="px-8 py-3 bg-white border border-primary text-primary hover:bg-primary hover:text-white rounded-lg transition-colors font-medium">
                    加载更多作品
                </button>
            </div>
        </div>
    </section>

    <!-- 评委团队 -->
    <section id="judges" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">评委团队</h2>
                <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
                <p class="text-gray-600 text-lg">
                    由各领域专家组成的评审团，将从创新性、实用性、可持续性等多个维度对作品进行评价
                </p>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
                <!-- 评委1 -->
                <div class="text-center">
                    <div class="relative w-48 h-48 mx-auto mb-4 rounded-full overflow-hidden border-4 border-primary/20">
                        <img src="https://picsum.photos/seed/judge1/300/300" alt="张明教授" class="w-full h-full object-cover">
                    </div>
                    <h3 class="text-xl font-bold mb-1">张明教授</h3>
                    <p class="text-primary mb-2">清华大学 创新设计学院</p>
                    <p class="text-gray-600 text-sm">
                        专注于产品设计与创新方法研究，拥有20年行业经验
                    </p>
                </div>
                
                <!-- 评委2 -->
                <div class="text-center">
                    <div class="relative w-48 h-48 mx-auto mb-4 rounded-full overflow-hidden border-4 border-primary/20">
                        <img src="https://picsum.photos/seed/judge2/300/300" alt="李华博士" class="w-full h-full object-cover">
                    </div>
                    <h3 class="text-xl font-bold mb-1">李华博士</h3>
                    <p class="text-primary mb-2">科技创新研究院</p>
                    <p class="text-gray-600 text-sm">
                        人工智能领域专家，曾主导多项国家级科研项目
                    </p>
                </div>
                
                <!-- 评委3 -->
                <div class="text-center">
                    <div class="relative w-48 h-48 mx-auto mb-4 rounded-full overflow-hidden border-4 border-primary/20">
                        <img src="https://picsum.photos/seed/judge3/300/300" alt="王静女士" class="w-full h-full object-cover">
                    </div>
                    <h3 class="text-xl font-bold mb-1">王静女士</h3>
                    <p class="text-primary mb-2">创新投资基金 合伙人</p>
                    <p class="text-gray-600 text-sm">
                        专注于早期创新项目投资，已成功孵化30余家初创企业
                    </p>
                </div>
                
                <!-- 评委4 -->
                <div class="text-center">
                    <div class="relative w-48 h-48 mx-auto mb-4 rounded-full overflow-hidden border-4 border-primary/20">
                        <img src="https://picsum.photos/seed/judge4/300/300" alt="赵伟先生" class="w-full h-full object-cover">
                    </div>
                    <h3 class="text-xl font-bold mb-1">赵伟先生</h3>
                    <p class="text-primary mb-2">知名设计公司 创始人</p>
                    <p class="text-gray-600 text-sm">
                        国际设计大奖得主，在可持续设计领域具有深厚造诣
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="py-16 bg-light">
        <div class="container mx-auto px-4">
            <div class="max-w-6xl mx-auto">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">联系我们</h2>
                        <div class="w-20 h-1 bg-primary mb-6"></div>
                        <p class="text-gray-600 text-lg mb-8">
                            如果您对大赛或入围作品有任何疑问，欢迎通过以下方式联系我们
                        </p>
                        
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fa fa-envelope text-primary"></i>
                                </div>
                                <div>
                                    <h3 class="font-bold mb-1">电子邮箱</h3>
                                    <p class="text-gray-600">info@innovation-competition.com</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fa fa-phone text-primary"></i>
                                </div>
                                <div>
                                    <h3 class="font-bold mb-1">联系电话</h3>
                                    <p class="text-gray-600">010-12345678</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fa fa-map-marker text-primary"></i>
                                </div>
                                <div>
                                    <h3 class="font-bold mb-1">办公地址</h3>
                                    <p class="text-gray-600">北京市海淀区中关村创新中心A座5层</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-8">
                            <h3 class="font-bold mb-4">关注我们</h3>
                            <div class="flex space-x-4">
                                <a href="#" class="w-10 h-10 rounded-full bg-primary/10 hover:bg-primary hover:text-white flex items-center justify-center transition-colors">
                                    <i class="fa fa-weixin"></i>
                                </a>
                                <a href="#" class="w-10 h-10 rounded-full bg-primary/10 hover:bg-primary hover:text-white flex items-center justify-center transition-colors">
                                    <i class="fa fa-weibo"></i>
                                </a>
                                <a href="#" class="w-10 h-10 rounded-full bg-primary/10 hover:bg-primary hover:text-white flex items-center justify-center transition-colors">
                                    <i class="fa fa-linkedin"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white p-8 rounded-xl shadow-md">
                        <h3 class="text-xl font-bold mb-6">发送咨询</h3>
                        <form>
                            <div class="mb-4">
                                <label for="name" class="block text-gray-700 mb-2 text-sm">您的姓名</label>
                                <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="请输入您的姓名">
                            </div>
                            
                            <div class="mb-4">
                                <label for="email" class="block text-gray-700 mb-2 text-sm">电子邮箱</label>
                                <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="请输入您的邮箱">
                            </div>
                            
                            <div class="mb-4">
                                <label for="subject" class="block text-gray-700 mb-2 text-sm">咨询主题</label>
                                <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                                    <option value="">请选择咨询主题</option>
                                    <option value="competition">大赛相关</option>
                                    <option value="work">作品相关</option>
                                    <option value="cooperation">合作咨询</option>
                                    <option value="other">其他问题</option>
                                </select>
                            </div>
                            
                            <div class="mb-6">
                                <label for="message" class="block text-gray-700 mb-2 text-sm">咨询内容</label>
                                <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="请输入您的咨询内容"></textarea>
                            </div>
                            
                            <button type="submit" class="w-full bg-primary text-white py-3 px-6 rounded-lg hover:bg-primary/90 transition-colors font-medium">
                                提交咨询
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
                            <i class="fa fa-lightbulb-o text-primary text-xl"></i>
                        </div>
                        <span class="text-xl font-bold">创新季大赛</span>
                    </div>
                    <p class="text-gray-400 text-sm">
                        发掘创新力量，点亮未来生活。创新季大赛致力于为优秀创意提供展示和成长的平台。
                    </p>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">快速链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#home" class="hover:text-white transition-colors">首页</a></li>
                        <li><a href="#works" class="hover:text-white transition-colors">入围作品</a></li>
                        <li><a href="#judges" class="hover:text-white transition-colors">评委团队</a></li>
                        <li><a href="#contact" class="hover:text-white transition-colors">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">相关资源</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white transition-colors">大赛章程</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">历届作品</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">合作伙伴</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">媒体报道</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">订阅最新资讯</h3>
                    <p class="text-gray-400 text-sm mb-4">
                        订阅我们的 newsletter，获取大赛最新动态
                    </p>
                    <div class="flex">
                        <input type="email" placeholder="您的邮箱地址" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-dark">
                        <button class="bg-primary hover:bg-primary/90 transition-colors px-4 py-2 rounded-r-lg">
                            <i class="fa fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8 text-center text-gray-500 text-sm">
                <p>© 2023 创新季大赛组委会 版权所有 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <!-- 作品详情模态框 -->
    <div id="workModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <div class="relative">
                <img id="modalImage" src="https://picsum.photos/seed/tech1/1200/600" alt="作品图片" class="w-full h-64 md:h-80 object-cover">
                <button id="closeModal" class="absolute top-4 right-4 w-10 h-10 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center text-white transition-colors">
                    <i class="fa fa-times"></i>
                </button>
                <div id="modalCategory" class="absolute top-4 left-4 bg-primary text-white text-xs font-medium px-3 py-1 rounded-full">
                    科技创新
                </div>
            </div>
            
            <div class="p-6 md:p-8">
                <div class="flex flex-col md:flex-row md:justify-between md:items-start gap-4 mb-6">
                    <div>
                        <h2 id="modalTitle" class="text-2xl md:text-3xl font-bold mb-2">智能环境监测系统</h2>
                        <p class="text-gray-500"><span id="modalTeam">团队：绿境科技</span></p>
                    </div>
                    <div class="bg-light px-4 py-2 rounded-lg">
                        <div class="flex items-center gap-2 text-sm">
                            <i class="fa fa-calendar text-primary"></i>
                            <span id="modalDate">提交日期：2023-06-15</span>
                        </div>
                    </div>
                </div>
                
                <div class="mb-8">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fa fa-info-circle text-primary mr-2"></i>作品简介
                    </h3>
                    <div id="modalDescription" class="text-gray-600 leading-relaxed">
                        基于物联网技术的智能环境监测系统，可实时监测空气质量、温湿度、噪音等环境参数，通过AI算法进行数据分析和预警。系统由传感器节点、网关和云平台三部分组成，具有部署灵活、功耗低、成本效益高等特点。
                        <br><br>
                        该系统已在多个社区和学校进行试点应用，帮助用户及时了解周边环境质量，为环保决策提供数据支持。未来计划增加更多环境参数监测能力，并开发面向普通家庭的简化版本。
                    </div>
                </div>
                
                <div class="mb-8">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fa fa-lightbulb-o text-primary mr-2"></i>创新点
                    </h3>
                    <ul id="modalInnovation" class="text-gray-600 space-y-2">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                            <span>低功耗设计，传感器节点续航可达12个月以上</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                            <span>自适应网络，可根据环境自动调整传输频率和范围</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                            <span>基于AI的异常检测算法，提高预警准确性</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                            <span>开放式API，方便与其他系统集成</span>
                        </li>
                    </ul>
                </div>
                
                <div class="mb-8">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fa fa-users text-primary mr-2"></i>团队介绍
                    </h3>
                    <div id="modalTeamIntro" class="text-gray-600">
                        绿境科技团队由5名环境工程和计算机专业的研究生组成，平均年龄25岁。团队成员具有丰富的传感器开发和环境监测领域经验，曾参与多个环保项目的技术研发工作。团队宗旨是通过技术创新改善环境质量，推动可持续发展。
                    </div>
                </div>
                
                <div class="flex justify-end gap-4">
                    <button id="closeModalBtn" class="px-6 py-2 border border-gray-300 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
                        关闭
                    </button>
                    <a id="modalLink" href="#" class="px-6 py-2 bg-primary text-white hover:bg-primary/90 rounded-lg transition-colors">
                        查看完整项目 <i class="fa fa-external-link ml-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 返回顶部按钮 -->
    <button id="backToTop" class="fixed bottom-6 right-6 w-12 h-12 bg-primary text-white rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
        // 作品数据
        const worksData = [
            {
                id: 1,
                title: "智能环境监测系统",
                team: "绿境科技",
                category: "tech",
                categoryName: "科技创新",
                image: "https://picsum.photos/seed/tech1/600/400",
                date: "2023-06-15",
                description: "基于物联网技术的智能环境监测系统，可实时监测空气质量、温湿度、噪音等环境参数，通过AI算法进行数据分析和预警。系统由传感器节点、网关和云平台三部分组成，具有部署灵活、功耗低、成本效益高等特点。<br><br>该系统已在多个社区和学校进行试点应用，帮助用户及时了解周边环境质量，为环保决策提供数据支持。未来计划增加更多环境参数监测能力，并开发面向普通家庭的简化版本。",
                innovation: [
                    "低功耗设计，传感器节点续航可达12个月以上",
                    "自适应网络，可根据环境自动调整传输频率和范围",
                    "基于AI的异常检测算法，提高预警准确性",
                    "开放式API，方便与其他系统集成"
                ],
                teamIntro: "绿境科技团队由5名环境工程和计算机专业的研究生组成，平均年龄25岁。团队成员具有丰富的传感器开发和环境监测领域经验，曾参与多个环保项目的技术研发工作。团队宗旨是通过技术创新改善环境质量，推动可持续发展。",
                link: "#"
            },
            {
                id: 2,
                title: "可折叠便携轮椅",
                team: "无障碍设计工作室",
                category: "design",
                categoryName: "设计创意",
                image: "https://picsum.photos/seed/design1/600/400",
                date: "2023-06-10",
                description: "创新性的可折叠设计，重量仅3.5公斤，折叠后体积相当于一个背包大小，解决了传统轮椅携带不便的问题。采用高强度铝合金材料，承重可达120公斤，兼顾轻便性和安全性。<br><br>座椅和靠背采用透气材料，提高长时间乘坐的舒适度。轮椅配备了可调节的脚踏和扶手，适应不同用户的需求。目前已获得两项实用新型专利，正在进行小批量试生产。",
                innovation: [
                    "独特的四连杆折叠机构，折叠过程简单快捷",
                    "超轻材料应用，重量仅为传统轮椅的1/3",
                    "符合人体工学的设计，兼顾舒适性和功能性",
                    "模块化设计，便于维修和部件更换"
                ],
                teamIntro: "无障碍设计工作室由3名工业设计专业毕业生创立，专注于为残障人士和老年人设计便捷、美观的辅助器具。团队注重用户体验研究，所有产品都经过目标用户的反复测试和改进。",
                link: "#"
            },
            {
                id: 3,
                title: "乡村教育资源共享平台",
                team: "乡知社",
                category: "social",
                categoryName: "社会创新",
                image: "https://picsum.photos/seed/social1/600/400",
                date: "2023-06-05",
                description: "连接城市优质教育资源与乡村学校的公益平台，通过在线课程、教师培训和资源共享，助力乡村教育发展。平台整合了来自全国多所重点学校的优质课程资源，涵盖小学到高中各个学科。<br><br>除了课程资源，平台还提供教师远程培训、城乡学校结对帮扶等功能。目前已覆盖全国10个省份的50所乡村学校，注册用户超过1万名。",
                innovation: [
                    "基于AI的个性化学习推荐系统，适配不同地区教学进度",
                    "离线缓存功能，适应乡村网络条件",
                    "积分激励机制，鼓励城市教师参与志愿教学",
                    "与当地教育部门合作，确保内容符合教学大纲"
                ],
                teamIntro: "乡知社是一个由教育工作者和技术人员组成的公益团队，致力于通过技术手段缩小城乡教育差距。团队成员包括前乡村教师、教育科技公司产品经理和软件开发工程师，平均拥有5年以上教育相关工作经验。",
                link: "#"
            },
            {
                id: 4,
                title: "零浪费食品订阅服务",
                team: "绿食尚",
                category: "business",
                categoryName: "商业计划",
                image: "https://picsum.photos/seed/business1/600/400",
                date: "2023-06-18",
                description: "基于社区的食品订阅服务，通过精准计算需求减少食物浪费，同时支持本地农户，实现可持续的商业模式。用户可以通过APP预订每周的食材套餐，系统根据预订量向农户下单，最大限度减少库存和浪费。<br><br>套餐包含当季新鲜蔬果、肉类和主食，按营养搭配组合。目前已在3个城市开展业务，拥有2000多名订阅用户，与50家本地农户建立了合作关系。",
                innovation: [
                    "需求预测算法，将浪费率控制在5%以下",
                    "灵活的订阅模式，支持按周调整套餐内容",
                    "闭环回收系统，包装材料可循环使用",
                    "与农户共享销售数据，帮助优化种植计划"
                ],
                teamIntro: "绿食尚团队由食品科学、供应链管理和市场营销专业人士组成，团队成员均有可持续发展领域的工作经验。创始人曾在国际环保组织工作，对食品浪费问题有深入研究，希望通过商业模式创新解决这一社会问题。",
                link: "#"
            },
            {
                id: 5,
                title: "区块链知识产权保护系统",
                team: "链知盾",
                category: "tech",
                categoryName: "科技创新",
                image: "https://picsum.photos/seed/tech2/600/400",
                date: "2023-06-20",
                description: "利用区块链技术为原创作品提供时间戳证明和版权保护，简化版权登记流程，降低维权成本。用户可通过系统快速上传作品摘要信息，系统自动生成不可篡改的时间戳和数字指纹，并同步至联盟链节点。<br><br>系统支持文字、图片、音频、视频等多种作品类型，提供版权存证、侵权监测和证据保全等一站式服务。目前已与多家文创企业和版权机构建立合作。",
                innovation: [
                    "轻量化存证方案，无需上传完整作品即可实现有效保护",
                    "跨链协同机制，与主流区块链网络兼容",
                    "AI辅助侵权监测，提高维权效率",
                    "智能合约自动执行授权和分成",
                ],
                teamIntro: "链知盾团队由区块链技术专家、知识产权律师和互联网产品经理组成，核心成员来自知名科技公司和律所。团队拥有多项区块链相关专利，在知识产权数字化保护领域具有深厚积累。",
                link: "#"
            },
            {
                id: 6,
                title: "模块化家具系统",
                team: "空间魔方",
                category: "design",
                categoryName: "设计创意",
                image: "https://picsum.photos/seed/design2/600/400",
                date: "2023-06-12",
                description: "可自由组合变换的模块化家具系统，适应不同空间需求和生活场景，延长产品生命周期，减少资源浪费。系统由基础模块和功能模块组成，通过标准化接口实现快速组装和重组。<br><br>用户可根据居住空间大小和使用需求，自行组合出书架、衣柜、沙发、餐桌等不同家具。产品采用环保材料制造，所有部件均可回收再利用。",
                innovation: [
                    "专利连接结构，无需工具即可快速组装拆卸",
                    "模块化设计支持功能扩展和升级",
                    "采用可回收材料，减少环境影响",
                    "数字化定制平台，支持用户参与设计过程",
                ],
                teamIntro: "空间魔方团队是一个年轻的设计团队，成员均毕业于知名设计院校，专注于可持续家具设计。团队认为好的设计应该兼具功能性、美观性和环保性，致力于通过创新设计解决城市居住空间有限的问题。",
                link: "#"
            }
        ];

        // DOM元素
        const menuBtn = document.getElementById('menuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        const filterBtns = document.querySelectorAll('.filter-btn');
        const workCards = document.querySelectorAll('.work-card');
        const searchInput = document.getElementById('searchInput');
        const viewDetailsBtns = document.querySelectorAll('.view-details');
        const workModal = document.getElementById('workModal');
        const closeModal = document.getElementById('closeModal');
        const closeModalBtn = document.getElementById('closeModalBtn');
        const backToTopBtn = document.getElementById('backToTop');
        const loadMoreBtn = document.getElementById('loadMore');

        // 移动端菜单切换
        menuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            const icon = menuBtn.querySelector('i');
            if (mobileMenu.classList.contains('hidden')) {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            } else {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            }
        });

        // 筛选功能
        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // 更新按钮样式
                filterBtns.forEach(b => {
                    b.classList.remove('active', 'bg-primary', 'text-white');
                    b.classList.add('bg-gray-200', 'hover:bg-gray-300');
                });
                btn.classList.add('active', 'bg-primary', 'text-white');
                btn.classList.remove('bg-gray-200', 'hover:bg-gray-300');
                
                const category = btn.getAttribute('data-category');
                
                // 筛选作品
                workCards.forEach(card => {
                    if (category === 'all' || card.getAttribute('data-category') === category) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });

        // 搜索功能
        searchInput.addEventListener('input', () => {
            const searchTerm = searchInput.value.toLowerCase().trim();
            
            workCards.forEach(card => {
                const title = card.querySelector('h3').textContent.toLowerCase();
                const team = card.querySelector('.text-gray-500').textContent.toLowerCase();
                
                if (title.includes(searchTerm) || team.includes(searchTerm)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });

        // 作品详情模态框
        function openModal(workId) {
            const work = worksData.find(item => item.id === parseInt(workId));
            if (!work) return;
            
            document.getElementById('modalImage').src = work.image.replace('600/400', '1200/600');
            document.getElementById('modalImage').alt = work.title;
            document.getElementById('modalTitle').textContent = work.title;
            document.getElementById('modalTeam').textContent = `团队：${work.team}`;
            document.getElementById('modalCategory').textContent = work.categoryName;
            document.getElementById('modalDate').textContent = `提交日期：${work.date}`;
            document.getElementById('modalDescription').innerHTML = work.description;
            document.getElementById('modalLink').href = work.link;
            
            // 更新创新点列表
            const innovationList = document.getElementById('modalInnovation');
            innovationList.innerHTML = '';
            work.innovation.forEach(item => {
                const li = document.createElement('li');
                li.className = 'flex items-start';
                li.innerHTML = `<i class="fa fa-check-circle text-primary mt-1 mr-2"></i><span>${item}</span>`;
                innovationList.appendChild(li);
            });
            
            // 更新团队介绍
            document.getElementById('modalTeamIntro').textContent = work.teamIntro;
            
            // 显示模态框
            workModal.classList.remove('hidden');
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }

        function closeModalFunc() {
            workModal.classList.add('hidden');
            document.body.style.overflow = ''; // 恢复背景滚动
        }

        viewDetailsBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const workId = btn.getAttribute('data-id');
                openModal(workId);
            });
        });

        closeModal.addEventListener('click', closeModalFunc);
        closeModalBtn.addEventListener('click', closeModalFunc);

        // 点击模态框外部关闭
        workModal.addEventListener('click', (e) => {
            if (e.target === workModal) {
                closeModalFunc();
            }
        });

        // 返回顶部按钮
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopBtn.classList.remove('opacity-0', 'invisible');
                backToTopBtn.classList.add('opacity-100', 'visible');
            } else {
                backToTopBtn.classList.add('opacity-0', 'invisible');
                backToTopBtn.classList.remove('opacity-100', 'visible');
            }
            
            // 导航栏滚动效果
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-3');
            } else {
                header.classList.add('py-3');
                header.classList.remove('py-2', 'shadow');
            }
        });

        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                // 关闭移动菜单（如果打开）
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                    const icon = menuBtn.querySelector('i');
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });

        // 加载更多按钮（模拟）
        loadMoreBtn.addEventListener('click', () => {
            loadMoreBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                loadMoreBtn.innerHTML = '没有更多作品了';
                loadMoreBtn.disabled = true;
                loadMoreBtn.classList.add('opacity-70', 'cursor-not-allowed');
            }, 1500);
        });
    </script>
</body>
</html>
